{__NOLAYOUT__}
<!DOCTYPE html>
<html lang="en">
<head>
    {include file='public:head'}
    <style>
        body{
            background: transparent;
        }
        #canvas{
            position: absolute;
            left: 0;
            top:0;
            z-index: -1;
            background: #fefefe;
        }
        input:-webkit-autofill {
            -webkit-box-shadow: 0 0 0px 1000px #333 inset;
            -webkit-text-fill-color: #fff;
        }
        .login-panel{
            width: 400px;
            margin: 0 auto;
            margin-top: 100px;
            background: #000;
            padding: 20px;
            border-radius: 3px;
            box-shadow: 0 0 15px #333;

        }
        .login-panel .title{
            display: inline-block;
            color: #FE5667;
            font-size: 24px;
            background: linear-gradient(to right,#FE5667,#FE9D4C);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            width: 100%;
            text-align: center;
            margin-bottom: 10px;
        }
        .login-panel .title-bottom-line{
            padding: 5px 0;
            position: relative;
        }
        .login-panel .title-bottom-line .line{
            border-bottom:1px solid #444;
            width: calc(50% - 30px);
            float: left;
        }
        .login-panel .title-bottom-line .line:last-child{
            float: right;
        }
        .login-panel .title-bottom-line .block{
            height: 10px;
            width: 10px;
            background: linear-gradient(to right bottom ,#FE5667,#FE9D4C);
            position: absolute;
            left: calc(50% - 5px);
            top:0;
        }
    </style>
</head>
<body>
<canvas id="canvas"></canvas>
<header>
    <a class="logo">雄鹰杯管理</a>
</header>
<div class="login-panel">
    <div class="title">欢迎登录后台管理</div>
    <div class="title-bottom-line">
        <div class="line"></div>
        <div class="block"></div>
        <div class="line"></div>
    </div>
    <form id="login-form" action="/api/auth/login" >
        <div class="form-group">
            <input placeholder="输入用户名" autocomplete="off" class="input-primary" name="username">
        </div>
        <div class="form-group">
            <input placeholder="输入密码" autocomplete="off" class="input-primary" name="password" type="password">
        </div>
        <div class="form-group">
            <input type="submit" class="btn btn-primary w-full"  value="登陆">
        </div>
    </form>
</div>
</body>
<script>
    var Admin=new App();
    $("#login-form").on('submit',function (e)
    {
        e.preventDefault();
        Admin.ajaxForm($(this));
    })
</script>
<script>
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");
	var cw = canvas.width = window.innerWidth,
		cx = cw / 2;
	var ch = canvas.height = window.innerHeight,
		cy = ch / 2;

	ctx.fillStyle = "#333";
	var linesNum = 16;
	var linesRy = [];
	var requestId = null;

	function Line(flag) {
		this.flag = flag;
		this.a = {};
		this.b = {};
		if (flag == "v") {
			this.a.y = 0;
			this.b.y = ch;
			this.a.x = randomIntFromInterval(0, ch);
			this.b.x = randomIntFromInterval(0, ch);
		} else if (flag == "h") {
			this.a.x = 0;
			this.b.x = cw;
			this.a.y = randomIntFromInterval(0, cw);
			this.b.y = randomIntFromInterval(0, cw);
		}
		this.va = randomIntFromInterval(25, 100) / 100;
		this.vb = randomIntFromInterval(25, 100) / 100;

		this.draw = function() {
			ctx.strokeStyle = "#eee";
			ctx.beginPath();
			ctx.moveTo(this.a.x, this.a.y);
			ctx.lineTo(this.b.x, this.b.y);
			ctx.stroke();
		}

		this.update = function() {
			if (this.flag == "v") {
				this.a.x += this.va;
				this.b.x += this.vb;
			} else if (flag == "h") {
				this.a.y += this.va;
				this.b.y += this.vb;
			}

			this.edges();
		}

		this.edges = function() {
			if (this.flag == "v") {
				if (this.a.x < 0 || this.a.x > cw) {
					this.va *= -1;
				}
				if (this.b.x < 0 || this.b.x > cw) {
					this.vb *= -1;
				}
			} else if (flag == "h") {
				if (this.a.y < 0 || this.a.y > ch) {
					this.va *= -1;
				}
				if (this.b.y < 0 || this.b.y > ch) {
					this.vb *= -1;
				}
			}
		}

	}

	for (var i = 0; i < linesNum; i++) {
		var flag = i % 2 == 0 ? "h" : "v";
		var l = new Line(flag);
		linesRy.push(l);
	}

	function Draw() {
		requestId = window.requestAnimationFrame(Draw);
		ctx.clearRect(0, 0, cw, ch);

		for (var i = 0; i < linesRy.length; i++) {
			var l = linesRy[i];
			l.draw();
			l.update();
		}
		for (var i = 0; i < linesRy.length; i++) {
			var l = linesRy[i];
			for (var j = i + 1; j < linesRy.length; j++) {
				var l1 = linesRy[j]
				Intersect2lines(l, l1);
			}
		}
	}

	function Init() {
		linesRy.length = 0;
		for (var i = 0; i < linesNum; i++) {
			var flag = i % 2 == 0 ? "h" : "v";
			var l = new Line(flag);
			linesRy.push(l);
		}

		if (requestId) {
			window.cancelAnimationFrame(requestId);
			requestId = null;
		}

		cw = canvas.width = window.innerWidth,
			cx = cw / 2;
		ch = canvas.height = window.innerHeight,
			cy = ch / 2;

		Draw();
	}

	setTimeout(function() {
		Init();

		addEventListener('resize', Init, false);
	}, 15);

	function Intersect2lines(l1, l2) {
		var p1 = l1.a,
			p2 = l1.b,
			p3 = l2.a,
			p4 = l2.b;
		var denominator = (p4.y - p3.y) * (p2.x - p1.x) - (p4.x - p3.x) * (p2.y - p1.y);
		var ua = ((p4.x - p3.x) * (p1.y - p3.y) - (p4.y - p3.y) * (p1.x - p3.x)) / denominator;
		var ub = ((p2.x - p1.x) * (p1.y - p3.y) - (p2.y - p1.y) * (p1.x - p3.x)) / denominator;
		var x = p1.x + ua * (p2.x - p1.x);
		var y = p1.y + ua * (p2.y - p1.y);
		if (ua > 0 && ub > 0) {
			markPoint({
						  x: x,
						  y: y
					  })
		}
	}

	function markPoint(p) {
		ctx.fillStyle = "#eee";
		ctx.beginPath();
		ctx.arc(p.x, p.y, 2, 0, 2 * Math.PI);
		ctx.fill();
	}

	function randomIntFromInterval(mn, mx) {
		return ~~(Math.random() * (mx - mn + 1) + mn);
	}
</script>
</html>